From 2f991e680bea37d1f97ea77df2343200f3899817 Mon Sep 17 00:00:00 2001 From: Anurag Date: Wed, 28 Feb 2024 21:13:25 +0530 Subject: feat: initialise a new totals tab with basic UI (#94) * feat: initialise a new totals tab with basic UI * fix: update group tabs and add stats page * fix: styling within the new elements * Prettier * Display active user expenses only if active user is set --------- Co-authored-by: Sebastien Castiel --- .../groups/[groupId]/stats/totals-your-share.tsx | 34 ++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/app/groups/[groupId]/stats/totals-your-share.tsx (limited to 'src/app/groups/[groupId]/stats/totals-your-share.tsx') diff --git a/src/app/groups/[groupId]/stats/totals-your-share.tsx b/src/app/groups/[groupId]/stats/totals-your-share.tsx new file mode 100644 index 0000000..3218d6f --- /dev/null +++ b/src/app/groups/[groupId]/stats/totals-your-share.tsx @@ -0,0 +1,34 @@ +'use client' +import { getGroup, getGroupExpenses } from '@/lib/api' +import { getTotalActiveUserShare } from '@/lib/totals' +import { formatCurrency } from '@/lib/utils' +import { useEffect, useState } from 'react' + +type Props = { + group: NonNullable>> + expenses: NonNullable>> +} + +export function TotalsYourShare({ group, expenses }: Props) { + const [activeUser, setActiveUser] = useState('') + + useEffect(() => { + const activeUser = localStorage.getItem(`${group.id}-activeUser`) + if (activeUser) setActiveUser(activeUser) + }, [group, expenses]) + + const totalActiveUserShare = + activeUser === '' || activeUser === 'None' + ? 0 + : getTotalActiveUserShare(activeUser, expenses) + const currency = group.currency + + return ( +
+
Your total share
+
+ {formatCurrency(currency, totalActiveUserShare)} +
+
+ ) +} -- cgit v1.3